<template>
  <div class="root" id="color" :class="{ active: isActive }">
    <div class="container" :class="{ active: isActive }">
      <div class="user signinBox">
        <div class="imgBox"><img src="../assets/img/002.jpg" /></div>
        <div class="formBox">
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
            <h2>Sign in</h2>
            <el-form-item  prop="rolename">
              <el-select v-model="loginForm.rolename" placeholder="请选择用户角色">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="Username"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                placeholder="Password"
                show-password
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <el-button type="primary" @click="login">Login</el-button>
            <p class="signup">
              don't have an account?<a href="#" @click="toggleFrom()"
                >Sign up.</a
              >
            </p>
          </el-form>
        </div>
      </div>

      <div class="user signupBox">
        <div class="formBox">
          <el-form ref="logonForm" :model="logonForm" :rules="logonRules">
            <h2>create an account</h2>
            <el-form-item prop="username">
              <el-input
                v-model="logonForm.username"
                placeholder="Username"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input
                v-model="logonForm.email"
                placeholder="Email"
                prefix-icon="el-icon-message"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="logonForm.password"
                placeholder="Pssword"
                show-password
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <el-form-item prop="cpassword">
              <el-input
                v-model="logonForm.cpassword"
                placeholder="Confirm Password"
                show-password
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <el-button type="danger" @click="logon">Sign up</el-button>
            <p class="signup">
              Already have an account?<a href="#" @click="toggleFrom()"
                >Sign in.</a
              >
            </p>
          </el-form>
        </div>
        <div class="imgBox"><img src="../assets/img/001.jpg" /></div>
      </div>
    </div>
  </div>
</template>

<script>
import { verifyLogin, queryUsername, verifyLogon } from "../api/data";
export default {
  name: "Login",
  data() {
    // 检查两次密码输入是否一致
    let checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.logonForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 注册表单数据
      logonForm: {
        username: "",
        password: "",
        cpassword: "",
        email: "",
      },
      //  登录表单数据
      loginForm: {
        rolename: "",
        username: "",
        password: "",
      },
      // 登录表单验证规则，注意select的表单验证prop与v-model属性名必须一致，否则会导致rule失效
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", triggger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", triggger: "blur" }],
        rolename: [{ required: true, message: "请选择登录角色", triggger: ["blur", "change"] }],
      },
      //  注册表单验证规则
      logonRules: {
        username: [
          { required: true, message: "请输入用户名", triggger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", triggger: "blur" }],
        cpassword: [{ validator: checkPass, triggger: "blur" }],
        email: [
          { required: true, meaasge: "请输入邮箱", triggger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
      options: [
        {value: '/student', label: '学生'},
        {value: '/coach', label: '教练'},
        {value: '/backstage', label: '后台'}
      ],
      isActive: false,
    };
  },
  methods: {
    toggleFrom() {
      // 实现注册界面与登录界面的转换
      this.isActive = !this.isActive;
    },
    login() {
      // 只用表单验证成功后才能发送请求
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          verifyLogin(this.loginForm.username, this.loginForm.password).then(
            (data) => {
              if (data.length !== 0) {
                this.$message.success("登陆成功...");
                this.$router.push({
                  path: "/about",
                  // 传递query参数,params参数需要在路由中添加占位符
                  query: {
                    username: this.loginForm.username,
                    password: this.loginForm.password,
                  },
                });
              } else {
                this.$message.error("用户名或密码错误...");
              }
            },
            (msg) => {
              this.$message.error(msg);
            }
          );
        } else {
          this.$message.error("表单验证不通过...");
        }
      });
    },
    logon() {
      // 首先根据用户名查询用户是否存在
      // 若存在，提示用户已存在，修改用户名
      // 若不存在，添加用户
      this.$refs.logonForm.validate((valid) => {
        if (valid) {
          queryUsername(this.logonForm.username).then(
            (data) => {
              if (data.length === 0) {
                verifyLogon(this.logonForm).then(
                  (data) => {
                    this.$message.success("账户注册成功");
                    // 返回注册页面
                    this.isActive = false;
                  },
                  (msg) => {
                    this.$message.error(msg);
                  }
                );
              } else {
                this.$message.error("用户名已存在，请重新注册...");
              }
            },
            (msg) => {
              this.$message.error(msg);
            }
          );
        } else {
          this.$message.error("表单验证不通过...");
        }
      });

      /* axios
        .sendRequest({
          url: "/form",
          method: "get",
          params: {
            username: this.logonForm.username,
          },
        })
        .then(
          (data) => {
            console.log(data);
            if (data.length === 0) {
              // 发送post请求添加数据
              axios
                .sendRequest({
                  url: "/form",
                  method: "post",
                  data: this.logonForm,
                })
                .then(
                  (data) => {
                    this.$message({
                      type: "success",
                      message: "添加数据成功",
                    });
                    // 返回注册页面
                    this.isActive = false;
                  },
                  (msg) => {
                    this.$message.error(msg);
                  }
                );
            } else {
              this.$message.info("用户名已存在，请重新注册...");
            }
          },
          (msg) => {
            this.$message.error(msg);
          }
        ); */
    },
  }
};
</script>

<style lang="css" scoped>
@import "../assets/css/index.css";
.el-select{
  width: 100%;
}
</style>